<style type="text/css"> #Survey {
    width: 70%;
    margin: 0 auto;
}
</style>

<section class="container" id="Survey">
    <h3> Instructions </h3>
    <p>
        We are building a voice personal virtual assistant that can help you control all your devices, social accounts, etc.
    </p>
    <p>
        In the following, you will see a cheatsheet containing the devices and functions our virtual assistant supports.
        There are 15 devices on the cheatsheet. Each device has up to 3 types of commands:
    </p>
    <ul>
        <li><font color="red">when</font> command: which decides when the rule will trigger, e.g., when it rains, when new article posts.</li>
        <li><font color="orange">get</font> command: get something from the device/service, e.g., get my latest email, get the current weather.</li>
        <li><font color="#006400">do</font> command: perform an action on the device/service, e.g., send an email, turn off my camera.</b>;</li>
    </ul>
    <p>
        You can combine two commands together to create a rule to simplify your life.
        Allowed combinations include
    </p>
    <ul>
        <li>when + get</li>
        <li>when + do</li>
        <li>get + get</li>
        <li>get + do</li>
    </ul>
    <p>
        Please do not combine two functions that are not connected to each other (as in Bad Example 2).
        Do not try to copy the exact sentences from the cheatsheet. Express the commands in your own word, as natural as you can.
        Here are some examples.
    </p>

    <h3> Examples: </h3>
    Example 1:
    <ul>
        <li><font color="red">when:</font> when i reach ____(location)</li>
        <li><font color="#006400">do:</font> turn ____ (power) my light bulb.</b>;</li>
        <li>Command: <em>When I get home, turn on the lights.</em></li>
    </ul>

    Example 2:
    <ul>
        <li><font color="red">when:</font> when i tweet </li>
        <li><font color="#006400">do:</font> post ____ (status) on facebook.</b>;</li>
        <li>Command: <em>Post all my new tweets to my facebook.</em></li>
    </ul>

    Example 3:
    <ul>
        <li><font color="orange">get:</font> get a ____ (tag) gif </li>
        <li><font color="#006400">do:</font> send ____ (picture) on slack.</b>;</li>
        <li>Command: <em>Send a #foodporn gif to a slack channel</em></li>
    </ul>

    Bad example 1 (do + do):
    <ul>
        <li><font color="#006400">do:</font> turn on the heater </li>
        <li><font color="#006400">do:</font>: turn ____ (power) my light bulb.</b>;</li>
        <li>Command: <em>Turn on the heater and the lights.</em></li>
    </ul>

    Bad example 2 (unconnected functions):
    <ul>
        <li><font color="orange">get:</font> get a ____ (tag) gif </li>
        <li><font color="#006400">do:</font>: turn ____ (power) my light bulb.</b>;</li>
        <li>Command: <em>Get a #foodporn gif and turn on the lights</em></li>
    </ul>

    <h3> Your turn now </h3>
    <p>
        Now take your time to read through the cheatsheet.
        Click "START" button if you are ready, and then you will be asked to provide 5 examples
        <b>by combining the functions in the cheatsheet.</b>
    </p>
    <p>
        Note that once you click the "START" button, <b>the cheatsheet will be removed.</b>
        You will <b>not</b> be able to read them again.
    </p>
    <p>
        When writing your commands, do not keep the "when", "get", and "do" in the cheatsheet in front of each example;
        do not leave any blanks in your commands, fill them with something you think it's reasonable and useful for you;
        do not use functions that are not in the cheatsheet.
        <b>If more than 2 commands you wrote fail to meet the criteria, your answer might be rejected</b>.
    </p>
    <p>
        You can only do this task once. <b>Multiple submissions from the same user ID will be rejected</b>.
    </p>

    <div id="cheatsheet-picture" style="text-align: center">
        <div>
            <img src="${url}" alt="cheatsheet">
        </div>

        <br>

        <button class="start" onClick="(function() {
            const res = confirm('Warn: once you start, you will no longer see the cheatsheet. Are you ready? ');
            if (res === true) {
                document.getElementById('cheatsheet-picture').style.display = 'none';
                document.getElementById('command-form').style.display='block';
            }
        })(); return false;">START</button>
    </div>

    <div id="command-form" style="display:none">
        <label>Command 1</label>
        <div class="form-group"><textarea class="form-control" cols="120" how="" id="command-1" name="command-1" required="" rows="3"></textarea></div>
        <br>

        <label>Command 2</label>
        <div class="form-group"><textarea class="form-control" cols="120" how="" id="command-2" name="command-2" required="" rows="3"></textarea></div>
        <br>

        <label>Command 3</label>
        <div class="form-group"><textarea class="form-control" cols="120" how="" id="command-3" name="command-3" required="" rows="3"></textarea></div>
        <br>

        <label>Command 4</label>
        <div class="form-group"><textarea class="form-control" cols="120" how="" id="command-4" name="command-4" required="" rows="3"></textarea></div>
        <br>

        <label>Command 5</label>
        <div class="form-group"><textarea class="form-control" cols="120" how="" id="command-5" name="command-5" required="" rows="3"></textarea></div>
        <br>
    </div>

</section>
